<template>
    <div class="wrap" id="wrap">
        <div class="logGet" :model="loginForm">
            <!-- 头部提示信息 -->
            <div class="logD logDtip">
                <p class="p1">生命不息，折腾不止</p>
            </div>
            <!-- 输入框 -->
            <div class="lgD">
                <input v-model="loginForm.userName" type="text" placeholder="输入用户名"/>
            </div>
            <div class="lgD">
                <input v-model="loginForm.userPassword" type="password" placeholder="输入用户密码"/>
            </div>
            <div class="lgImage">
                <div style="float: left">
                    <input style="height: 40px" v-model="loginForm.captcha" placeholder="输入验证码"/>
                </div>
                <div style="float: right">
                    <img style="width: 100px;height: 43px" class="pointer"  :src="images" @click="refreshCaptcha">
                </div>
            </div>
            <div class="logC">
                <a>
                    <button @click="login">登 录</button>
                </a>
            </div>
            <br>
            <div align="center" style="align-items: center">
                <a @click="register">注 册</a>
            </div>
            <br><br><br>
            <hr>
            <div align="center" style="align-items: center">
                <p style="font-size: 15px;color: aliceblue">© 2019 All Rights Reserved. SteakLiu</p>
            </div>
        </div>

        <el-dialog title="注册" :visible.sync="registerDialog" center>
            <el-form :model="registerForm" label-width="100px">
                <el-form-item label="账号">
                    <el-input v-model="registerForm.username" type="text" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="registerForm.password" type="password" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <img :src="this.captchaCode">
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitRegister">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import {Message} from "element-ui";
    import {getAddress} from "../../api/baiduApi";
    import {getCaptcha} from "../../api/userApi";

    export default {
        name: "Login",
        data() {
            return {
                registerDialog: false,
                backgroundImage: require('../../assets/images/美丽的风景.jpg'),
                loginForm: {
                    userName: '',
                    userPassword: '',
                    captcha:'',
                },
                registerForm: {
                    username: '',
                    password: '',
                },
                location:'',
                images:'',
            }
        },

        created(){
            this.captcha();
            // getAddress().then(res => {
            //     this.location = res.data.content.address;
            //     sessionStorage.setItem("city",res.data.content.address);
            // }).catch(() =>{
            //
            // })
        },

        mounted() {
            this.refreshCaptcha()
        },


        methods: {
            refreshCaptcha: function(){
                this.images = 'http://127.0.0.1:8088/user' + "/captcha.jpg?t=" + new Date().getTime();
            },

            /**
             * 获取校验码
             */
            captcha(){
                getCaptcha().then(res =>{
                    this.captchaCode = res;
                })
            },
            /**
             * 注册
             */
            register() {
                this.registerDialog = true;
            },
            submitRegister() {
                console.log("register "+sessionStorage.getItem("city"))
                const userInfo = {
                    username:this.registerForm.username,
                    password:this.registerForm.password,
                    address:this.location,
                }
                this.$store.dispatch("userRegister", this.$qs.stringify(userInfo)).then(() => {
                    Message.success("注册成功，欢迎登陆");
                    this.registerDialog = false;
                }).catch(() => {

                })
            },
            /**
             * 登陆
             */
            login() {
                this.$store.dispatch("userLogin", this.loginForm).then(() => {
                    this.$router.push('/Welcome');
                    Message.success("欢迎你的到来，喜欢可以支持一下")
                }).catch(() => {
                    this.$router.push('/login')
                });
                this.$router.push('/Welcome');
            }
        },
    }
</script>

<style scoped>
    body {
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }

    * {
        margin: 0;
        padding: 0;
    }

    #wrap {
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("../../assets/images/背景图片.jpg");
    }

    #wrap .logGet {
        height: 400px;
        width: 340px;
        position: absolute;
        background-color: #FFFFFF;
        top: 100px;
        right: 15%;
        opacity: 0.8;
    }

    .logC a button {
        width: 100%;
        height: 45px;
        background-color: #2b85e4;
        border: none;
        color: white;
        font-size: 18px;
    }

    .logGet .logD.logDtip .p1 {
        display: inline-block;
        font-size: 15px;
        margin-top: 30px;
        width: 86%;
    }

    #wrap .logGet .logD.logDtip {
        width: 86%;
        border-bottom: 1px solid #ee7700;
        margin-bottom: 20px;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
    }

    .logGet .lgD img {
        position: absolute;
        top: 12px;
        left: 8px;
    }

    .logGet .lgD input {
        width: 100%;
        height: 42px;
        text-indent: 2.5rem;
    }

    #wrap .logGet .lgD {
        width: 86%;
        position: relative;
        margin-bottom: 30px;
        margin-top: 15px;
        margin-right: auto;
        margin-left: auto;
    }
    .lgImage{
        width: 86%;
        position: relative;
        margin-bottom: 30px;
        margin-top: 15px;
        margin-right: auto;
        margin-left: auto;
    }



    #wrap .logGet .logC {
        width: 86%;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }

</style>
